
<template>
  <el-dialog v-dialogDrag :visible.sync="currentDialogVisible" title="字段属性信息" top="10vh" class="table-info-dialog" width="900px" append-to-body>
    <!-- <el-scrollbar :noresize="false" :native="false" wrap-class="scrollbar-wrap"> -->
    <el-row class="padding-bottom-10">
      <el-col :span="7">
        <span class="w-80 inline-block align-right">表名：</span>{{ dataOptions.tableView }}
      </el-col>
      <el-col :span="7">
        <span class="w-80 inline-block align-right">主键：</span>{{ dataOptions.idField }}
      </el-col>
      <el-col :span="10">
        <span class="w-80 inline-block align-right">路由：</span>{{ dataOptions.router }}
      </el-col>
    </el-row>
    <el-row class="padding-bottom-10">
      <el-col :span="7">
        <span class="w-80 inline-block align-right">模块ID：</span>{{ dataOptions.menu_Id }}
      </el-col>
      <el-col :span="7">
        <span class="w-80 inline-block align-right">连接字段：</span>{{ dataOptions.linkColumn }}
      </el-col>
      <el-col :span="10">
        <span class="w-80 inline-block align-right">排序方式：</span>{{ dataOptions.sortName }}
      </el-col>
    </el-row>
    <el-table :data="fields" style="width: 100%" max-height="500">
      <el-table-column prop="prop" label="英文名">
      </el-table-column>
      <el-table-column prop="label" label="中文名">
      </el-table-column>
      <el-table-column prop="dataType" label="数据类型" width="90">
      </el-table-column>
      <el-table-column prop="width" label="宽度" width="80">
      </el-table-column>
      <el-table-column prop="type" label="输入框类型" width="110">
      </el-table-column>
      <el-table-column prop="isExpandField" label="扩展字段" width="80">
        <template slot-scope="{row, column, $index}">
          <el-tag v-if="row.isExpandField" type="warning">是</el-tag>
          <span v-else>否</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- </el-scrollbar> -->
    <span slot="footer" class="dialog-footer">
      <div></div>
      <el-button @click="currentDialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>

</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dataOptions: {
      type: Object,
      default: () => {
        return {};
      }
    },
    fields: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data () {
    return {
      isLoading: false
    };
  },
  computed: {
    // 显示窗口
    currentDialogVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    }
  },
  watch: {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.table-info-dialog {
  ::v-deep .el-dialog__body {
    padding: 10px 5px;
  }
  ::v-deep .scrollbar-wrap {
    max-height: 400px;
  }
  .alert-msg {
    margin-bottom: 10px;
  }
}
</style>
